<template>
  <div style="height: 70px;width: 100%;background: #aeb3c5;text-align: center">
    <span style="color: white;line-height: 70px;font-size: 25px">供应商管理</span>
  </div>
  <el-table :data="cutObj.records" style="width: 100%">
    <el-table-column prop="name" label="供应商名称"/>
    <el-table-column prop="user" label="负责人"/>
    <el-table-column prop="scope" label="经营范围"/>
    <el-table-column fixed="right" label="操作" width="220">
      <template #default="s">
        <el-button type="danger" @click="dialogShow=true;showSup(s.row)">查看</el-button>
        <el-button type="success" @click="dialogUpdate=true;updateSup(s.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--页码-->
  <el-pagination
      v-model:currentPage="cutObj.current"
      v-model:page-size="cutObj.size"
      background
      layout="prev, pager, next, jumper"
      :total="cutObj.total"
      style="margin-top: 30px"
      @current-change="findByItem"
  />

  <div style="display: flex;justify-content: space-around">
    <el-button style="margin-top: 100px" type="success" @click="dialogAdd=true;addSup">添加供应商</el-button>
    <!--addAll-->
    <el-button style="margin-top: 100px" type="success" @click="addAllVisible=true">文件添加供应商</el-button>
    <el-dialog
        v-model="addAllVisible"
        title="上传文件"
        width="30%"
    >
      <el-row style="width: 100%;margin-left: 50px;line-height: 20px">
        <input type="file" ref="textFile">
        <br>
      </el-row>
      <template #footer>
      <span class="dialog-footer">
        <el-button style="margin-left: 40%" type="primary" @click="addAllVisible=false;this.addAll()">导入</el-button>
        <el-button type="success" @click="addAllVisible = false">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <!--查询供应商信息-->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>查询供应商信息</span>
          <el-button type="primary" @click="findByItem(1)">查询</el-button>
        </div>
      </template>
      <div class="text item">
        <div>供应商名称：
          <el-input v-model="findObj.name" placeholder="供应商名称"/>
        </div>
        <div style="margin-top: 30px">经营范围：
          <el-input v-model="findObj.scope" placeholder="经营范围"/>
        </div>
      </div>
    </el-card>
  </div>

  <!--添加弹出框-->
  <el-dialog
      v-model="dialogAdd"
      title="添加供应商"
      width="35%"
      :before-close="handleClose">
    <div>
      <div style="margin-bottom: 30px;">供应商名称：
        <el-input class="addIpt" v-model="addObj.name"/>
      </div>
      <div style="margin-bottom: 30px;">负责人：
        <el-input class="addIpt" v-model="addObj.user"/>
      </div>
      <div style="margin-bottom: 30px;">负责人电话：
        <el-input class="addIpt" v-model="addObj.phone"/>
      </div>
      <div style="margin-bottom: 30px;">供应商地址：
        <el-input class="addIpt" v-model="addObj.address"/>
      </div>
      <div style="margin-bottom: 30px;">经营范围：
        <el-input class="addIpt" v-model="addObj.scope"/>
      </div>
    </div>
    <template #footer>
  <span class="dialog-footer">
    <el-button @click="dialogAdd = false">取消添加</el-button>
    <el-button type="primary" @click="addSup(addObj)">确认添加</el-button>
  </span>
    </template>
  </el-dialog>

  <!--查看弹出框-->
  <el-dialog
      v-model="dialogShow"
      title="供应商详细信息"
      width="35%"
      :before-close="handleClose">
    <div>
      <div style="margin-bottom: 30px;">供应商名称：
        <span>{{ infoObj.name }}</span>
      </div>
      <div style="margin-bottom: 30px;">负责人：
        <span>{{ infoObj.user }}</span>
      </div>
      <div style="margin-bottom: 30px;">负责人电话：
        <span>{{ infoObj.phone }}</span>
      </div>
      <div style="margin-bottom: 30px;">供应商地址：
        <span>{{ infoObj.address }}</span>
      </div>
      <div style="margin-bottom: 30px;">经营范围：
        <span>{{ infoObj.scope }}</span>
      </div>
    </div>
    <template #footer>
  <span class="dialog-footer">
    <el-button type="primary" @click="dialogShow = false">确认</el-button>
  </span>
    </template>
  </el-dialog>

  <!--修改弹出框-->
  <el-dialog
      v-model="dialogUpdate"
      title="修改供应商"
      width="35%"
      :before-close="handleClose">
    <div>
      <div style="margin-bottom: 30px;">供应商名称：
        <span>{{ updateObj.name }}</span>
      </div>
      <div style="margin-bottom: 30px;">负责人：
        <el-input style="width: 200px;" v-model="updateObj.user"/>
      </div>
      <div style="margin-bottom: 30px;">负责人电话：
        <el-input style="width: 200px;" v-model="updateObj.phone"/>
      </div>
      <div style="margin-bottom: 30px;">供应商地址：
        <span>{{ updateObj.address }}</span>
      </div>
      <div style="margin-bottom: 30px;">经营范围：
        <span>{{ updateObj.scope }}</span>
      </div>
    </div>
    <template #footer>
  <span class="dialog-footer">
    <el-button @click="dialogUpdate = false">取消修改</el-button>
    <el-button type="primary" @click="dialogUpdate = false;changeInfo(this.updateObj)">确认修改</el-button>
  </span>
    </template>
  </el-dialog>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutObj: {},
      findObj: {},
      infoObj: {},
      updateObj: {},
      addObj: {},
      addAllVisible: false,
      dialogAdd: false,
      dialogShow: false,
      dialogUpdate: false
    }
  },
  methods: {
    findByItem(pageNO) {
      this.findObj.pageNO = pageNO;
      axios.get("/project/supplier/findByItem", {
        params: this.findObj
      }).then(resp => {
        this.cutObj = resp.data
      })
    },
    showSup(obj) {
      this.infoObj = obj;
    },
    updateSup(obj) {
      this.updateObj = obj;
    },
    changeInfo(obj) {
      axios.get("/project/supplier/update", {
        params: {
          supplierId: obj.id,
          person: obj.user,
          phone: obj.phone
        }
      }).then(resp => {
        if (resp.data === "ok") {
          this.updateObj = {};
          this.findByItem(1)
        }
      })
    },
    addSup(obj) {
      axios.get("/project/supplier/add", {
        params: obj
      }).then(resp => {
        if (resp.data === "ok") {
          this.dialogAdd = false;
          this.addObj = {};
          this.findByItem(1)
        }
      })
    },
    async addAll() {
      var fromObj = new FormData();
      fromObj.append("excelFile", this.$refs.textFile.files[0]);
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
      await axios.post("/project/supplier/addList", fromObj, config).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
        }
      });
    }
  },
  created() {
    this.findByItem(1)
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}

.addIpt {
  width: 600px;
}
</style>